<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	alert("작고 노란 존재가 바로 당신입니다. 당신은 '움직이기' 혹은 '움직이지 않기' 라는 선택에서의 자유를 누릴 수 있습니다. 움직이려면 방향키 혹은 숫자방향키를 이용하세요." );
	
	$("#me").position().top; //<div id="me">를 가장 위 layer에 놓는다.
	$("body").on("keydown", function(e){
		//alert(e.keyCode);
		var move = $("#me");
		var key = e.keyCode; //방향키의 화살표
		if(key==40 || key==98){ //아래쪽 화살표
			move.animate({"margin-top":"+=10"}, 30);
			animateStop();
			ehmessage();
		}
		if(key==39 || key==102){ //오른쪽 화살표
			move.animate({"margin-left":"+=10"}, 30);
			animateStop();
			ehmessage();
		}
		if(key==38 || key==104){ //위쪽 화살표
			move.animate({"margin-top":"-=10"}, 30);
			animateStop();
			ehmessage();
		}
		if(key==37 || key==100){ //왼쪽 화살표
			move.animate({"margin-left":"-=10"}, 30);
			animateStop();
			ehmessage();
		}
		if(key==101){ //numkey의 가운데 화살표
			$("#me").hide(30);
			$("#me").fadeIn(30);
			imhere();
			animateStop();
		}
		
		 var top = parseInt($("#me").css("margin-top"));
		 var left = parseInt($("#me").css("margin-left"));
		 var right = parseInt($("#me").css("margin-right"));
		 var bottom = parseInt($("#me").css("margin-bottom"));
		 //alert(position);
	     //var height = parseInt($("#event_horizon_img").css("height"));
	     if(top<280 && left>550 && left<800 && top>5){
	    	 //alert("top-left-right-bottom : "+top+", "+left+", "+right+", "+bottom+", ");
	    	 location.href="freefromSth.jsp";
	     }
	});

	
     
	
});
function animateStop(){
	$("body").on("keyup", function(){
		$("#me").stop();
		$("#me").empty();
	});
}
function imhere(){
	$("#me").html("<br>here").css("color", "yellow");	
}
function ehmessage(){
	$("#message").fadeIn();
	$("body").on("keyup", function(){
		$("#message").hide();
	});
}
</script>
<style type="text/css">
body{
	 width: 100%;
	 height: 100%;
	 position: fixed; /*body를 고정 - scroll로 넘어가지 않도록 함*/
	 margin: 0;
	 background-color: black;
}
#me{
	width: 5px;
	height: 5px;
	margin-top:500px;
	margin-left:680px;
	background-color: yellow;
	position: absolute; /* layer(div, img 등)이 겹치도록 설정 */
}
#blackhole{
	color: yellow;
}
#event_horizon_img{
}
#message{
	font-size: 12px;
	color: yellow;
	display: none;
	align: right;
}
</style>
</head>
<body >
<div id="move"><span id="me"></span></div>
<center>
<div id="blackhole">
	<img id="event_horizon_img" src="/cost_of_living/event_horizon.png">
	<div id="message">
		<b>event horizon</b> <br>
		이 경계를 지나면 다시는 돌아갈 수 없습니다.
	</div>
</div>
</center>

<bgsound src="Skyfall.mp3" loop="infinite" ><!-- bgsound: 익스플로어 전용 -->


</body>
</html>